[macOS][iOS] パケットトレースツール「Charles」を使用してiOSデバイスの生の送受信データを確認する

Apple Technical Q&Aを読んでみた

平屋真吾

2017.03.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは。モバイルアプリサービス部の平屋です。

本記事では、パケットトレースツール「Charles」を使用してiOSデバイスの生の送受信データを確認する手順を解説します。

検証環境

macOS 10.12.3
java version 1.8.0_121
Charles 4.0.2
iPhone 6 iOS 10.2.1

Appleの公式ドキュメントで紹介されているパケットトレースツール

Appleの公式ドキュメント「Technical Q&A QA1176: Getting a Packet Trace」では、macOSでパケットをトレースするためのツールとして以下のツールが紹介されています。

Charles
CPA
Debookee
HTTP Scoop
IPNetMonitorX
mitmproxy
tcpdump
tcpflow
tcptrace
Wireshark
Wireless Diagnostics

紹介されているツールの中に「Charles」があります。

「mitmproxy」の使用方法については、「[iOS] mitmproxy を使用して iOS アプリ側の HTTP キャッシュの動作を確認する」で紹介しました。

Charles

「監視対象デバイス」と「デバイスのアクセス先」との間にプロキシを立てて、通信内容を表示したり書き換えたりできるようにしてくれるツールです。

ログ出力では表示できない生のリクエスト内容を確認したり、何らかの通信まわりの問題に関する調査を行なったりする時などに役に立ちます。

価格は、USD $50で、評価目的で30日間試用できます。

Windows、macOS、Linuxで動作します。本記事では、macOSでCharlesを動作させて、iOSデバイスの送受信データを確認する手順を解説していきます。

Charlesをインストールする

以下のページからMac OS X向けのdmgファイルをダウンロードします。

https://www.charlesproxy.com/download/

ダウンロードしたdmgファイルをダブルクリックし、ファイル展開完了後にCharles.appをApplicationsフォルダにコピーします。

Charlesを起動する

起動画面

Charlesを起動すると、以下のロード画面が表示されます。

トライアルモードの場合、この画面が10秒間表示されます。

初期設定ダイアログ

初めての起動の場合、Charles用のネットワーク設定を自動で設定するかどうかを聞かれます。拒否する理由が特になければ「Grant Privileges」をクリックします。

OSのパスワードを求められたら、パスワードを入力し「OK」をクリックします。

メインウィンドウ

メインウィンドウが開きます。

ブラウザなどで通信を発生させると、その通信の内容が表示されます。

ポート番号とIPアドレスを確認する

Charlesで使用するポート番号と、Charlesを実行中のMacのIPアドレスを確認し、メモしておきます。

Charlesで使用するポート番号

Charlesのプロキシ設定画面を表示すると確認できます。

CharlesのProxyメニュー -> Proxy Settings...

Charlesを実行中のMacのIPアドレス

任意の方法でCharlesを実行中のMacのローカルIPアドレスを確認します。(例:192.168.0.11)

CharlesのHelpメニュー -> Local IP Address...
macOSのシステム環境設定 -> ネットワーク

iOSデバイスのパケットをトレースするための準備を行う

トレース対象のデバイスでプロキシの設定などを行います。

プロキシの設定

設定アプリ -> Wi-Fi を開き、使用するWi-Fiの設定画面を開きます。

1番下までスクロールし、HTTPプロキシセクションの「手動」をタップします。

「ポート番号とIPアドレスを確認する」で確認した「ポート番号とIPアドレス」を「サーバ」と「ポート」に入力し、前の画面に戻ります。

ポート番号とIPアドレスを設定した後にiOSデバイスで通信を発生させると、Charlesが以下のダイアログを表示させるので「Allow」をクリックします。

証明書のインストール

SSL通信の中身を見たい場合は、Charlesの証明書をインストールします。

証明書配布ページを開く

iOSデバイスのSafariで以下のURLを開きます。

http://www.charlesproxy.com/getssl

iOSデバイス上にQRコード読み取りアプリがインストールされているのであれば、以下のQRコードを使って上記URLを開くことができます。

getting-packet-trace-with-charles-15

証明書をインストールする

Safariで証明書配布ページを開くと、プロファイルのインストール画面へ遷移します。

「インストール」をタップします。

パスコードの入力を求められたら、パスコードを入力します。

「インストール」をタップします。

「完了」をタップします。

パケットをトレースする

iOSデバイスのパケットをトレースするための準備が整いましたので、Charles上での作業に戻ります。

Macのトレースログを非表示にする

Charlesを実行中のMacのトレースログを非表示にするには、Proxy -> Proxy Settings... -> macOSタブを開き「Enable macOS Proxy」のチェックを外して「OK」クリックします。

トレースログをクリアする

トレースログをクリアするには、ツールバー上のホウキアイコンのボタンをクリックします。

トレースログの記録を停止する

トレースログの記録を停止するには、ツールバー上の赤丸アイコンのボタンをクリックします。

iOSデバイスの通信の内容を確認してみる

例として、以下の記事で作成したファイルアップロードAPIに対する通信の内容を確認してみます。

[Swift] Swift製WebフレームワークVaporを使用してファイルアップロード API を作成する

ログをリクエストごとに表示するには「Sequence」を選択します。

Sequenceビューが表示されました。上半分に「リクエストのリスト」が、下半分に「選択中のリクエストの詳細」が表示されます。

「リクエストのリスト」の下のタブを切り替えると、「選択中のリクエストの詳細」に表示される内容を変えることができます。

デフォルトで「OverView」が選択されます。通信の概要が表示されます。

リクエストとレスポンスのヘッダやボディを表示するには「Contents」を選択します。

「Contents」を選択すると、ビューがさらに分割されます。上半分にリクエストに関する情報が、下半分にレスポンスに関する情報が表示されます。

リクエストとレスポンスそれぞれのビューの下の方にあるタブを切り替えると、表示内容を変えることができます。

「Headers」を選択するとヘッダを表示できます。

「Raw」を選択すると生データを表示できます。

通信の内容を確認する手順の解説は以上になります。

その他

トライアル版の制限

定期的に以下の画面が表示され、10秒間操作ができなくなります。

連続使用時間が30分を超えると、再起動を要求するダイアログが表示されます。「OK」をクリックするとCharlesが再起動します。

ひと通り評価が終わって、今後も使い続けそうであればライセンスを購入しましょう!

iOSデバイスの設定を元に戻す

Charlesでの検証が終わったらiOSデバイスのプロキシの設定を元に戻すのを忘れないようにしましょう。

設定アプリ -> Wi-Fi -> 対象のWi-Fiの詳細画面 -> HTTPプロキシをオフにする

また、CharlesのプロファイルをiOSデバイスにインストールした場合、プロファイルは設定アプリから削除できます。

設定アプリ -> 一般 -> プロファイル -> Charles Proxy CA ... を削除する

さいごに

本記事では、パケットトレースツール「Charles」を使用してiOSデバイスの生の送受信データを確認する手順を解説しました。

本記事で紹介したのはCharlesの機能の一部です。今後、他の機能も試してみたいと思います!